<template>
    <view>
        <u-toast ref="uToast" /><u-no-network></u-no-network>
        <u-navbar title="在线充值" safeAreaInsetTop fixed placeholder>
            <view class="coreshop-navbar-left-slot" slot="left">
                <u-icon name="arrow-left" size="19" @click="goNavigateBack"></u-icon>
                <u-line direction="column" :hairline="false" length="16" margin="0 8px"></u-line>
                <u-icon name="home" size="22" @click="goHome"></u-icon>
            </view>
            <view slot="right">
            </view>
        </u-navbar>
        <view class="coreshop-bg-white coreshop-margin-10 coreshop-padding-10" v-if="showRecharge">
            <u--form :model="form" :rules="rules" ref="uForm" errorType="message" labelPosition="left" labelWidth="80">
                <u-form-item label="当前金额" borderBottom>
                    <view class="coreshop-text-red coreshop-text-price coreshop-font-17">{{ user.balance || '0'}}</view>
                </u-form-item>
                <u-form-item label="储值金额" prop="form.money">
                    <u--input type="number" v-model="form.money" disabled="true" placeholder='请输入要储值的金额' border="bottom" clearable />
                </u-form-item>
            </u--form>

            <view class="coreshop-flex coreshop-align-center coreshop-justify-center coreshop-padding-10">
                请选择您的充值方案
            </view>

            <view>
                <u-grid :border="false" col="2">
                    <u-grid-item v-for="(item, key) in typeList" :key="key">
                        <view class="coreshop-padding-10 coreshop-percent-100">
                            <u-button type="error" :plain="item.plain" :text="item.title" @click="changeMoney(key)"></u-button>
                        </view>
                    </u-grid-item>
                </u-grid>
            </view>

            <view class="coreshop-font-13 coreshop-line-height-22 coreshop-margin-top-40">
                <p>
                    充值须知：
                </p>
                <p>
                    1、充值金额永不过期；
                </p>
                <p>
                    2、充值一经办理，概不退款；
                </p>
            </view>

            <!--按钮-->
            <view class="coreshop-bg-white coreshop-footer-fixed coreshop-foot-padding-bottom">
                <u-button type="error" size="normal" @click="navigateToHandle">去支付</u-button>
            </view>
        </view>
        <view v-else>
            <view class="page-box">
                <view>
                    <view class="coreshop-emptybox">
                        <u-empty :icon="$globalConstVars.apiFilesUrl+'/static/images/empty/coupon.png'" icon-size="150" mode="order" text="暂未充值功能"></u-empty>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                user: {}, // 用户信息
                typeList: [],
                topUpTypeId: 0,
                form: {
                    money: 0// 储值的金额
                },
                rules: {
                    money: [
                        {
                            required: true,
                            message: '请输入储值金额',
                            trigger: 'blur,change'
                        }, {
                            type: 'number',
                            message: '请输入整数金额',
                            trigger: 'blur,change'
                        }
                    ]
                },
                orderType: this.$globalConstVars.paymentType.recharge	// 储值类型
            }
        },
        computed: {
            showRecharge() {
                return this.$store.state.config.showStoreBalanceRechargeSwitch === 1;
            }
        },
        onReady() {
            this.$refs.uForm.setRules(this.rules);
        },
        onLoad() {
            this.userInfo()
            this.getTopUpTypeList();
        },
        methods: {
            // 获取用户信息
            userInfo() {
                this.$u.api.userInfo().then(res => {
                    if (res.status) {
                        this.user = res.data
                    }
                })
            },
            // 获取用户信息
            getTopUpTypeList() {
                this.$u.api.getTopUpTypeList().then(res => {
                    if (res.status) {
                        for (var i = 0; i < res.data.length; i++) {
                            res.data[i].plain = i != 0;
                            if (i == 0) {
                                this.form.money = res.data[0].defaultMoney;
                                this.topUpTypeId = res.data[0].id;
                            }
                        }
                        this.typeList = res.data;
                    }
                })
            },
            changeMoney(key) {
                for (var i = 0; i < this.typeList.length; i++) {
                    if (key == i) {
                        this.typeList[i].plain = false;
                        this.form.money = this.typeList[i].defaultMoney;
                        this.topUpTypeId = this.typeList[i].id;
                    } else {
                        this.typeList[i].plain = true;
                    }
                }
                this.$refs.uForm.validateField('form.money')
                console.log(key);
                console.log(this.topUpTypeId);
            },
            // 去储值
            navigateToHandle() {
                this.$refs.uForm.validate().then(res => {
                    console.log('验证通过');
                    if (this.topUpTypeId <= 0) {
                        this.$u.toast('请选择您要储值的方案。')
                        return false;
                    }
                    if (!Number(this.form.money)) {
                        this.$u.toast('请选择您要储值的方案。')
                    } else {
                        this.$u.route('/pages/payment/pay/pay?recharge=' + Number(this.topUpTypeId) + '&type=' + this.orderType)
                    }
                }).catch(errors => {
                    uni.$u.toast('提交的数据校验失败，请输入合法信息！')
                })
            }
        }
    }
</script>

<style lang="scss" scoped>
</style>
